<docs>
</docs>
<template>
  <div v-show="hasInitEvent" class="selects" @click.stop>
    <div class="search">
      <input type="text" placeholder="请输入职位关键字" v-model="gwmc">
      <button class="weui-btn_primary" @click.prevent="getPosition(gwmc)">搜索</button>
      <button class=" weui-btn_default" @click.prevent="isOk()">确定</button>
    </div>
    <div class="chooseDom" v-show="chooseList.length">
      <div class="clearfix"><span style="float:left;">已选</span><span style="float:right;">{{chooseList.length}}/3</span></div>
      <ul>
        <li v-for="(item, index) in chooseList" :key='index+item.gwmc'>{{item.gwmc}}
          <i class="iconfont icon-close input_close" @click="clearVal(index)"></i>
        </li>
      </ul>
    </div>
    <div class="position">
      <ul>
        <li v-for="(item, index) in position" :key="index" @click="choose(item.gwmc,item.gwbh)"
        :gwbh="item.gwbh">{{item.gwmc}}</li>
        <li class="no_data" v-show="!isFirst && position.length === 0">无匹配结果，请重新输入</li>
      </ul>
    </div>
    <p class="list_num" v-show="!isFirst">共{{position.length}}条结果</p>
  </div>
</template>
<script>
import $ from '@/common/js/axios';

export default {
  props: {
    chooseList: Array,
    deleteList: Array,
    hasInitEvent: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      position: [],

      deleteNeed: [],
      gwmc: '',
      isFirst: true
    };
  },
  methods: {
    backBase() {
      this.$emit('update:hasInitEvent', false);
    },
    // 删除
    clearVal(n){;
      if (this.deleteList[n]) {
        this.deleteNeed.push(this.deleteList.splice(n,1)[0]);
      }
      this.$emit('update:lableList', this.deleteNeed);

      this.chooseList.splice(n, 1);
    },
    getPosition(gwmc) {
      $.get('/dmbgl/tsgwCx', { params: { gwmc, pageSize: 500 } }).then(res => {
        const data = res.returnData;
        this.position = data.tsgwxx;
        this.isFirst = false;
      });
    },
    isOk(){
      this.$emit('update:chooseList', this.chooseList);
      this.$emit('update:hasInitEvent', false);
    },
    // 点击职位获取职位名称
    choose(name, gwbh) {
      if (this.chooseList.length == 3) {
        this.$alert("最多新增三个岗位");
        return;
      }
      this.chooseList.push({ gwbm: gwbh, gwmc: name });
    }
  }
};
</script>
<style scoped lang="scss">
@import '~common/scss/var.scss';
.weui-label {
  @include label;
}

.selects {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 3;
  width: 100%;
  height: 100%;
}
.search {
  display: flex;
  margin: 20px 0;
  input {
    width: 60%;
    margin: 0 2% 0 4%;
    border: 1px solid #ccc;
    border-radius: 30px;
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
  }
  button {
    width: 15%;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    border-radius: 5px;
    margin: 0 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  .weui-btn_primary{
    color: #fff;
  }
  .weui-btn_default{
    margin-top: 0px;
  }
}
.chooseDom{
  margin-bottom: 20px;
  div{
    margin: 0 auto;
    margin-bottom: 10px;
    width: 90%;
    font-size:$font-size-small;
  }
  ul{
    width: 90%;
    margin: 0 auto;
    padding: 10px 0;
    border-radius: 10px;
    background-color: #ebebeb;
    li{
      display: inline-block;
      font-size: $font-size-small;
      padding: 0 13px;
      margin: 0 17px;
      background-color: #fff;
      height: 40px;
      line-height: 40px;
      border-radius: 20px;
    }

    .input_close {
      float: right;
      height: 26px;
      width: 26px;
      margin: 7px 0 0 10px;
      line-height: 26px;
      box-sizing: border-box;
      text-align: center;
      border-radius: 15px;
      background-color: #DEDEDE;
      font-size: 13px;
      font-weight: bold;
      color: #fff;
    }
  }
}
.position {
  max-height: 700px;
  overflow: scroll;
  ul {
    margin-bottom: 30px;
    width: 90%;
    margin: 0 auto;
  }
  li {
    height: 80px;
    line-height: 80px;
    font-size: 30px;
    color: $color-text-primary;
    text-align: center;
  }
  li:nth-of-type(odd) {
    background-color: rgba(#e0eee0, 0.7);
  }
  li:nth-of-type(even) {
    background-color: rgba(#f7f7f7, 0.7);
  }
}
.btn {
  width: 100%;
  display: flex;
  button {
    width: 40%;
    margin-top: 0;
  }
}
.list_num {
  text-align: center;
  font-size: $font-size-small;
  padding: $padding-base;
  color: $color-text-label;
}
</style>
